/**************************************独立模块************************************ */
// 导出pdf
/**
 * 记录汇总：vue导出pdf文件
 * html2canvas 将html转为图片 JsPDF 将图片导出pdf
 * 遇到的问题与需求
 * 1.传入dom节点信息  html2canvas 转成的图片信息不全，起初仅导出在浏览器可见的区域导
 * 问题修改参见 【html2canvas控件截图时，图片显示不全】
 * https://blog.csdn.net/elvia7/article/details/129548808
 * https://blog.csdn.net/GXT963/article/details/128900600
 * 2.导入的pdf内容有的内容没有按照a4纸张切割 有个内容被分割在相邻的纸张区域内
 * 问题修改参考
 * https://blog.csdn.net/u013100927/article/details/130972834
 * 由于表单dom子节点没法具体区分 暂时未处理
 * 3.要求导出的pdf添加水印
 * 整合查找 多数方案是用 JsPDF 实现。但是JsPDF默认不支持中文....
 * 如果非中文 水印 可以用 addWatermark 方法：虽然网上有一些实现JsPDF支持中文的方法。但没有那么简单
 * 另一个思路就是 dom节点中添加模拟的水印dom内容
 */
import html2canvas from "html2canvas";
import JsPDF from "jspdf";
import { Message , Loading } from 'element-ui'
/**
 * 导出pdf
 * @param {*} title 文件名
 * @param {*} id dom节点id
 * @param {*} text 水印内容
 * @returns
 */
export const savePdf = (title, id, text) => {
	return new Promise(async (resolve, reject) => {
		let dom = document.getElementById(id);
		//生成水印信息
		// let mark = setWaterMark(text)
		// dom.appendChild(mark)
		html2canvas(
			dom,
			{
				useCORS: true,
				allowTaint: true,
				// dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
				// scale: 4, //按比例增加分辨率  导致文件大小飙升
				scale: 1
			}
		).then((canvas) => {
			// console.log(canvas);
			//由于是模拟的水印需要删除，否则影响界面展示
			const cleardom = document.querySelectorAll('.mask_div')
			Array.from(cleardom).forEach((item) => {
				item.remove()
			})
			//
			var pdf = new JsPDF('p', 'mm', 'a4'); //A4纸，纵向
			var ctx = canvas.getContext('2d'),
				a4w = 190,
				a4h = 272, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
				imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
				renderedHeight = 0;
			while (renderedHeight < canvas.height) {
				var page = document.createElement('canvas');
				page.width = canvas.width;
				page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
				//用getImageData剪裁指定区域，并画到前面创建的canvas对象中
				page.getContext('2d').putImageData(
					ctx.getImageData(
						0,
						renderedHeight,
						canvas.width,
						Math.min(imgHeight, canvas.height - renderedHeight),
					),
					0,
					0,
				);
				pdf.addImage(
					page.toDataURL('image/jpeg', 1.0),
					'JPEG',
					10,
					10,
					a4w,
					Math.min(a4h, (a4w * page.height) / page.width),
				); //添加图像到页面，保留10mm边距
				renderedHeight += imgHeight;
				if (renderedHeight < canvas.height) {
					pdf.addPage(); //如果后面还有内容，添加一个空页
				}
				// delete page;
			}
			// addWatermark(pdf, 'aimer:管理员');
			pdf.save(title + ".pdf");
			//添加成功标识
			pdf.successFlag = true
			resolve(pdf)
		});
	})
}


//模拟dom水印信息
export const setWaterMark = text => {

	//默认设置

	var defaultSettings = {
		watermark_x: 20, //水印起始位置x轴坐标
		watermark_y: 80, //水印起始位置Y轴坐标
		watermark_rows: 80, //水印行数
		watermark_cols: 20, //水印列数
		watermark_x_space: 80, //水印x轴间隔
		watermark_y_space: 102, //水印y轴间隔
		watermark_color: '#aaa', //水印字体颜色
		watermark_alpha: 0.4, //水印透明度
		watermark_fontsize: '18px', //水印字体大小
		watermark_font: '微软雅黑', //水印字体
		watermark_width: 300, //水印宽度
		watermark_height: 80, //水印长度
		watermark_angle: 20 //水印倾斜度数
	};

	var oTemp = document.createDocumentFragment();
	//获取页面最大宽度
	var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth);
	var cutWidth = page_width * 0.0150;
	var page_width = page_width - cutWidth;
	//获取页面最大高度
	var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight) + 2860;
	// var page_height = document.body.scrollHeight+document.body.scrollTop;
	//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔

	if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
		defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
		defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
	}

	//如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔

	if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (

		defaultSettings.watermark_rows - 1)) > page_height)) {

		defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));

		defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));

	}

	var x;
	var y;
	for (var i = 0; i < defaultSettings.watermark_rows; i++) {

		y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;

		for (var j = 0; j < defaultSettings.watermark_cols; j++) {

			x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;

			var mask_div = document.createElement('div');

			mask_div.id = 'mask_div' + i + j;

			mask_div.className = 'mask_div';

			mask_div.appendChild(document.createTextNode(text));

			//设置水印div倾斜显示
			mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
			mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
			mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
			mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
			mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
			mask_div.style.visibility = "";
			mask_div.style.position = "absolute";
			mask_div.style.left = x + 'px';
			mask_div.style.top = y + 'px';
			mask_div.style.overflow = "hidden";
			mask_div.style.zIndex = "9999";
			mask_div.style.pointerEvents = 'none'; //pointer-events:none  让水印不遮挡页面的点击事件
			//mask_div.style.border="solid #eee 1px";
			mask_div.style.opacity = defaultSettings.watermark_alpha;
			mask_div.style.fontSize = defaultSettings.watermark_fontsize;
			mask_div.style.fontFamily = defaultSettings.watermark_font;
			mask_div.style.color = defaultSettings.watermark_color;
			mask_div.style.textAlign = "center";
			mask_div.style.width = defaultSettings.watermark_width + 'px';
			mask_div.style.height = defaultSettings.watermark_height + 'px';
			mask_div.style.display = "block";
			oTemp.appendChild(mask_div);
		};

	};

	// dom.appendChild(oTemp);
	return oTemp

}

/**
 * savePdf 集成load效果 亦可独立使用 savePdf
 */
export const htmlToPdf = (title, id, text) => {
	console.log("🚀 ~ title, id, text", title, id, text)
	try {
		let loading = Loading .service({
			lock: true,
			text: "正在加载...",
			background: 'rgba(255, 255, 255, 0.5)',
		});
		//延迟执行是由于点击后没有立即执行loading效果
		setTimeout(async () => {
			let pdf = await savePdf(title, id, text);
			// console.log(pdf);
			if (pdf.successFlag) {
				loading.close();
			} else {
				loading.close();
				Message.warning('下载打印失败，请重新尝试');
			}
		}, 500);


	} catch (error) {
		setTimeout(() => {
			loading.close();
		}, 1000);
	}
}
